<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets">

    <p:panel styleClass="imgHeader generalInputFormPanel" rendered="#{managerView.activePanel == 'NEW_TEAM'}">
        <f:facet name="header">
            <h:graphicImage library="images" name="team-16.png" style="margin-bottom: 1px;margin-top: 1px;" />
            <h:outputText styleClass="title" value="#{msg['managerPage.teamManagement.newTeam.title']}" />
        </f:facet>

        <h:panelGrid id="editTeamPanel" columns="2" styleClass="inputDataFields" columnClasses="label,value">
            <h:outputText value="#{msg['managerPage.teamManagement.name']}" />
            <h:panelGroup>
                <p:inputText id="teamName" value="#{teamManager.newOrModifiedTeamBean.teamName}" required="true" requiredMessage="#{msg['managerPage.teamManagement.name.requiredMsg']}" />
                <p:message for="teamName" />
            </h:panelGroup>
            <h:outputText value="#{msg['managerPage.teamManagement.leader']}" />
            <p:selectOneMenu value="#{teamManager.newOrModifiedTeamBean.teamLeader}" panelStyleClass="leaderPanel" effect="fade"
                             filter="true" filterMatchMode="contains" converter="#{teamManager.teamLeaderConverter}">
                <f:selectItem itemLabel="#{msg['managerPage.teamManagement.leader.filter.all']}" itemValue="" />
                <f:selectItems value="#{teamManager.availableUsers}" var="leader" itemLabel="#{leader.firstname} #{leader.lastname} (#{leader.username})" itemValue="#{leader.username}"/>
            </p:selectOneMenu>
        </h:panelGrid>

        <p:accordionPanel>
            <p:tab title="#{msg['managerPage.teamManagement.sectionAssignment']}">
                <h:panelGroup layout="block" id="sectionAssignment" styleClass="pickListComponent">
                    <h:panelGrid columns="2" styleClass="layout" cellspacing="0" cellpadding="0">
                        <p:inputText value="#{teamManager.sectionNameFilter}" styleClass="filter" onfocus="hideFilterLabel()" onblur="showFilterLabel()">
                            <p:ajax event="keyup" process="@this" update="assignableSections" />
                        </p:inputText>
                        <h:panelGroup>
                            <h:outputText value="#{msg['managerPage.teamManagement.sectionAssignment.assignedSections']}:" />
                            <p:commandButton action="#{teamManager.removeAllAssignedSections}" value="#{msg['managerPage.teamManagement.sectionAssignment.removeAll']}"
                                             process="@this" update=":#{p:component('sectionAssignment')}" styleClass="remove" icon="remove" />
                        </h:panelGroup>
                        <p:selectManyMenu id="assignableSections" value="#{teamManager.selectedSections}" var="s" converter="#{teamManager.sectionConverter}">
                            <f:selectItems value="#{teamManager.assignableSections}" var="section" itemLabel="#{section.sectionName} (#{section.sectionCode})" itemValue="#{section}" />
                            <p:column>
                                <h:graphicImage library="images" name="folder-16.png" />
                            </p:column>
                            <p:column>
                                <h:outputText value="#{s.sectionName} (#{s.sectionCode})" />
                            </p:column>
                            <p:ajax process="@this" update="sectionAssignment" event="change" />
                        </p:selectManyMenu>
                        <p:dataGrid value="#{teamManager.newOrModifiedTeamBean.sections}" var="selectedSection" columns="3"
                                    emptyMessage="#{msg['managerPage.teamManagement.sectionAssignment.noSectionsAssigned']}..." >
                            <h:panelGroup>
                                <h:panelGroup styleClass="ui-widget ui-state-default assignedManager">
                                    <h:graphicImage library="images" name="folder-16.png" />
                                    <h:outputText value="#{selectedSection.sectionName} (#{selectedSection.sectionCode})" />
                                    <p:commandLink action="#{teamManager.removeAssignedSection(selectedSection)}" process="@this" update=":#{p:component('sectionAssignment')}"
                                                   styleClass="remove" title="#{msg['managerPage.teamManagement.sectionAssignment.remove']}" />
                                </h:panelGroup>
                            </h:panelGroup>
                        </p:dataGrid>
                    </h:panelGrid>
                    <script type="text/javascript">
                        $(document).ready(function () {
                            $filterLabel = "#{msg['managerPage.teamManagement.sectionAssignment.sectionFilter']}...";
                            showFilterLabel();
                        });
                        function showFilterLabel() {
                            if ($(".pickListComponent .filter").val().length == 0) {
                                $(".pickListComponent .filter").val($filterLabel);
                                $(".pickListComponent .filter").css("color", "gray");
                            }
                        }
                        function hideFilterLabel() {
                            if ($(".pickListComponent .filter").val() == $filterLabel) {
                                $(".pickListComponent .filter").val("");
                                $(".pickListComponent .filter").css("color", "#313131");
                            }
                        }
                    </script>
                </h:panelGroup>
            </p:tab>
            <p:tab title="#{msg['managerPage.teamManagement.memberAssignment.title']}">
                <h:panelGroup id="memberAssignment" layout="block" styleClass="memberAssignment">
                    <p:dataTable id="assignableTeamMembers" value="#{teamManager.assignableUsers}" var="userItem" filteredValue="#{teamManager.filteredTeams}"
                                 emptyMessage="#{msg['managerPage.teamManagement.memberAssignment.noMember']}..." styleClass="assignableTeamMembers">
                        <p:columnGroup type="header">
                            <p:row>
                                <p:column>
                                    <f:facet name="header">
                                        <p:selectBooleanCheckbox id="selectAll" value="#{teamManager.selectAllBox}"
                                                                 onchange="if ($(this).is(':checked')) {$('.selectAllAction').click()} else {$('.deselectAllAction').click()}" />
                                    </f:facet>
                                </p:column>
                                <p:column headerText="#{msg['managerPage.teamManagement.memberAssignment.users.username']}" />
                                <p:column headerText="#{msg['managerPage.teamManagement.memberAssignment.users.firstName']}" />
                                <p:column headerText="#{msg['managerPage.teamManagement.memberAssignment.users.lastName']}" />
                                <p:column headerText="#{msg['managerPage.teamManagement.memberAssignment.users.sex']}" />
                                <p:column headerText="#{msg['managerPage.teamManagement.memberAssignment.users.age']}" />
                                <p:column headerText="#{msg['managerPage.teamManagement.memberAssignment.users.email']}" />
                                <p:column headerText="#{msg['managerPage.teamManagement.memberAssignment.users.state']}" />
                                <p:column headerText="#{msg['managerPage.teamManagement.memberAssignment.users.group']}" />
                                <p:column headerText="#{msg['managerPage.teamManagement.memberAssignment.users.registrationDate']}" />
                            </p:row>
                            <p:row>
                                <p:column style="background:transparent" />
                                <p:column filterBy="#{userItem.user.username}" filterMatchMode="contains" />
                                <p:column filterBy="#{userItem.user.firstname}" filterMatchMode="contains" />
                                <p:column filterBy="#{userItem.user.lastname}" filterMatchMode="contains" />
                                <p:column filterBy="#{userItem.user.sex}" filterMatchMode="exact" filterOptions="#{userManager.sexFilterOptions}" />
                                <p:column filterBy="#{userItem.user.age}" filterMatchMode="contains" />
                                <p:column filterBy="#{userItem.user.email}" filterMatchMode="contains" />
                                <p:column filterBy="#{userItem.user.state}" filterMatchMode="exact" filterOptions="#{userManager.stateFilterOptions}" />
                                <p:column filterBy="#{userItem.user.group.groupName}" filterMatchMode="contains" />
                                <p:column filterBy="#{userItem.user.registrationDate}"  filterMatchMode="contains" />
                            </p:row>
                        </p:columnGroup>
                        <p:column>
                            <p:selectBooleanCheckbox value="#{userItem.checked}" />
                        </p:column>
                        <p:column>
                            <h:outputText value="#{userItem.user.username}" />
                        </p:column>
                        <p:column>
                            <h:outputText value="#{userItem.user.firstname}"/>
                        </p:column>
                        <p:column>
                            <h:outputText value="#{userItem.user.lastname}"/>
                        </p:column>
                        <p:column>
                            <h:outputText value="#{msg['managerPage.teamManagement.memberAssignment.users.sex.male']}" rendered="#{userItem.user.sex}"/>
                            <h:outputText value="#{msg['managerPage.teamManagement.memberAssignment.users.sex.female']}" rendered="#{!userItem.user.sex}"/>
                        </p:column>
                        <p:column>
                            <h:outputText value="#{userItem.user.age}"/>
                        </p:column>
                        <p:column>
                            <h:outputText value="#{userItem.user.email}"/>
                        </p:column>
                        <p:column>
                            <h:outputText value="#{msg['managerPage.teamManagement.memberAssignment.users.state.active']}" rendered="#{userItem.user.state}"/>
                            <h:outputText value="#{msg['managerPage.teamManagement.memberAssignment.users.state.inactive']}" rendered="#{!userItem.user.state}"/>
                        </p:column>
                        <p:column>
                            <h:outputText value="#{userItem.user.group.groupName}"/>
                        </p:column>
                        <p:column>
                            <h:outputText value="#{userItem.user.registrationDate}" />
                        </p:column>
                        <f:facet name="footer">
                            <p:commandButton value="#{msg['managerPage.teamManagement.memberAssignment.assignSelected']}" icon="assignUser" action="#{teamManager.assignSelectedUsers}" process="assignableTeamMembers" update=":#{p:component('memberAssignment')}" />
                            <p:commandButton value="#{msg['managerPage.teamManagement.memberAssignment.removeAll']}" icon="delete" action="#{teamManager.removeAllMembers}" process="assignableTeamMembers" update=":#{p:component('memberAssignment')}" style="float:right;margin-right: 0" />
                        </f:facet>
                    </p:dataTable>
                    <p:commandButton style="display: none" styleClass="selectAllAction" process="@this" action="#{teamManager.selectAll(true)}" update="assignableTeamMembers" />
                    <p:commandButton style="display: none" styleClass="deselectAllAction" process="@this" action="#{teamManager.selectAll(false)}" update="assignableTeamMembers" />
                    <div class="pickListComponent">
                        <p:dataGrid id="assignedMembers" value="#{teamManager.assignedMembers}" var="teamMember" columns="5" styleClass="assignedMembers"
                                    emptyMessage="#{msg['managerPage.teamManagement.memberAssignment.noMembersAssigned']}..." >
                            <h:panelGroup>
                                <h:panelGroup styleClass="ui-widget ui-state-default assignedManager">
                                    <h:graphicImage library="images" name="user.png" />
                                    <h:outputText value="#{teamMember.firstname} #{teamMember.lastname} (#{teamMember.username})" />
                                    <p:commandLink action="#{teamManager.removeAssignedMember(teamMember)}" process="@this" update=":#{p:component('memberAssignment')}"
                                                   styleClass="remove" title="#{msg['managerPage.teamManagement.memberAssignment.remove']}" />
                                </h:panelGroup>
                            </h:panelGroup>
                        </p:dataGrid>
                    </div>
                </h:panelGroup>
            </p:tab>
        </p:accordionPanel>
        <div class="buttonsPanel">
            <p:commandButton value="#{msg['Common.save']}" icon="save" update="@form" action="#{teamManager.save}" />
            <p:commandButton value="#{msg['Common.cancel']}" action="#{managerView.switchPanel('DESCRIPTION')}" update="@form" icon="cancel" process="@this" >
                <f:actionListener type="org.omnifaces.eventlistener.ResetInputAjaxActionListener"/>
            </p:commandButton>
        </div>
    </p:panel>
</ui:composition>